<template>
  <view>
    <slot />

    <u-popup :show="mask" mode="bottom" bgColor="transparent">
      <form @submit="onOk">
        <view class="content">
          <view class="content-title">为提供更好的体验，请设置您的昵称、头像</view>
          <view class="content-image border-bottom">
            <button class="content-image-btn button-base" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
              <view class="content-label">
                用户头像
              </view>
              <image class="content-image-btn-avatar" :src="userInfo.avatarUrl"></image>
            </button>
          </view>
          <view class="content-nickname border-bottom" :class="{error: nickNameError}">
            <view class="content-label">
              用户昵称
            </view>
            <view class="content-nickname-box">
              <input
                :always-embed="true"
                class="content-nickname-box-input"
                name="nickname"
                type="nickname"
                maxlength="16"
                placeholder="请输入昵称"
                :placeholder-style="placeholderStyle"
                @change="onNickNameChange"
              />
            </view>
          </view>
          <view class="content-footer">
            <button class="button-base" form-type="submit">
              <view class="btn-ok">确认</view>
            </button>
            <view class="btn-colse" @click="onClose">取消</view>
          </view>
        </view>
      </form>
    </u-popup>
  </view>
</template>

<script>
  import config from "@r/config/index.js";
  import compareVersion from '@r/utils/compareVersion.js';

  export default {
    name: "GetUserInfo",
    props: {
      value: {
        type: Boolean,
        default: false,
      },
    },
    data() {

      return {
        SDKVersion: '1.0.0',
        mask: this.value,
        userInfo: {
          avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
          nickName: '',
        },
        nickNameError: false,
      };
    },
    watch: {
      value(newValue) {
        // compareVersion > 0 使用新版获取用户方法
        if(compareVersion(this.SDKVersion, '2.27.1') > 0){
          this.mask = newValue;
        } else {
          this.onOldAuth();
        };
      },
      mask(newValue) {
        this.$emit('input', newValue);
      },
    },
    computed: {
      placeholderStyle(){
        if(this.nickNameError) {
          return 'color: #F76260';
        };
        return ""
      },
    },
    mounted() {
      try {
        const res = uni.getSystemInfoSync();
        this.SDKVersion = res.SDKVersion;
      } catch (e) {}
    },
    methods: {
      onOldAuth(){
        uni.getUserProfile({
          desc: '用于完善个人信息',
          success: (res) => {
            const userInfo = {
              avatarUrl: res.userInfo.avatarUrl,
              nickName: res.userInfo.nickName,
            };
            this.userInfo = userInfo;
            this.$emit('onOk', userInfo);
          },
          complete:() => {
            this.$emit('input', false);
          },
        })
      },
      onGetUserInfo() {
        this.mask = true;
      },
      onChooseAvatar(e) {
        const { avatarUrl } = e.detail;

        uni.showToast({
          title: '请修改自行修改头像上传',
          duration: 12000
        });

        // // 仅为示例，非真实的接口地址
        // uni.uploadFile({
        //   url: `${config.service}/api/platform/addoss`,
        //   filePath: avatarUrl,
        //   name: 'upload',
        //   success(res) {
        //     const resData = JSON.parse(res.data);
        //     vm.userInfo.avatarUrl = resData.data.url.replace("http://", "https://");
        //   }
        // });
      },
      onOk(e) {
        this.userInfo.nickName = e.detail.value.nickname;
        // 用户可能会填 0
        if(`${this.userInfo.nickName}`){
          this.$emit('input', false);
          this.$emit('onOk', this.userInfo);
        } else {
          this.nickNameError = true;
        };
      },
      onClose() {
        this.$emit('onClose', {
          avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
          nickName: '微信用户',
        });
        this.$emit('input', false);
      },

      onNickNameChange(){
        this.nickNameError = false;
      },
    },
  }
</script>

<style lang="scss" scoped>

  .content {
    width: 100%;
    padding: 45rpx 28rpx;
    background-color: #fff;
    box-sizing: border-box;

    .border-bottom {
      border-bottom: 1PX solid #e7e7e7;
    }

    &-title {
      font-size: 28rpx;
      line-height: 1.5;
      color: #393939;
    }

    &-label {
      font-size: 28rpx;
      color: #919191;
      line-height: 1.5;
    }

    &-image {
      padding: 30rpx 0;
      box-sizing: border-box;

      &-btn {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-avatar {
          display: block;
          width: 96rpx;
          height: 96rpx;
          border-radius: 50%;
          overflow: hidden;
        }
      }
    }

    &-nickname {
      padding: 30rpx 0 0;
      box-sizing: border-box;

      &.error {
        border-color: #F76260;
      }

      &-box {
        padding: 30rpx 0;
        box-sizing: border-box;

        &-input {
          font-size: 28rpx;
          color: #000;
          line-height: 1.5;
        }
      }
    }

    &-footer {
      padding: 40px 0 0;

      .btn-ok {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 80rpx;
        font-size: 28rpx;
        color: #fff;
        background-color: #333333;
      }

      .btn-colse {
        padding-top: 26rpx;
        width: 100%;
        font-size: 20rpx;
        line-height: 1.5;
        color: #3a3a3a;
        text-align: center;
        text-decoration: underline;
      }
    }
  }
</style>
